<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <!-- 引入 bootstrap 样式表 -->
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <link rel="stylesheet" href="./lib/nprogress(1).css">
  <style>
    body {
      padding-top: 50px;
    }
  </style>
</head>

<body>
  <!-- 栅格系统 -->
  <div class="container">
    <div class="d-flex justify-content-between align-items-center">
      <h1>图书管理</h1>
      <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addModal">添加</button>
    </div>
    <table class="table table-bordered table-striped table-dark table-hover text-center">
      <thead>
        <!-- 表头行 -->
        <tr>
          <th scope="col">Id</th>
          <th scope="col">书名</th>
          <th scope="col">作者</th>
          <th scope="col">出版社</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- 表格中的每一行 -->
        <!-- <tr>
          <th scope="row">xxx</th>
          <td>xxx</td>
          <td>xxx</td>
          <td>xxx</td>
          <td>
            <button type="button" class="btn btn-link btn-sm btn-delete">删除</button>
            <button type="button" class="btn btn-link btn-sm btn-update">编辑</button>
          </td>
        </tr> -->
      </tbody>
    </table>
  </div>
  <!-- add Modal 添加模态框 -->
  <div class="modal fade" id="addModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">添加图书</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="addForm" class="p-3">
            <!-- 书名 -->
            <div class="mb-3">
              <label class="form-label">书名</label>
              <input type="text" name="bookname" class="form-control" placeholder="请输入图书名称" name="bookname" />
            </div>
            <!-- 作者 -->
            <div class="mb-3">
              <label class="form-label">作者</label>
              <input type="text" name="author" class="form-control" placeholder="请输入作者名字" name="author" />
            </div>
            <!-- 出版社 -->
            <div class="mb-3">
              <label class="form-label">出版社</label>
              <input type="text" name="publisher" class="form-control" placeholder="请输入出版社名称" name="publisher" />
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="addBtn">确认</button>
        </div>
      </div>
    </div>
  </div>
  <!-- edit Modal -->
  <div class="modal fade" id="editModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">编辑图书</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="editForm" class="p-3">
            <input type="hidden" name="id" />
            <!-- 书名 -->
            <div class="mb-3">
              <label class="form-label">书名</label>
              <input type="text" name="bookname" class="form-control" placeholder="请输入图书名称" name="bookname" />
            </div>
            <!-- 作者 -->
            <div class="mb-3">
              <label class="form-label">作者</label>
              <input type="text" name="author" class="form-control" placeholder="请输入作者名字" name="author" />
            </div>
            <!-- 出版社 -->
            <div class="mb-3">
              <label class="form-label">出版社</label>
              <input type="text" name="publisher" class="form-control" placeholder="请输入出版社名称" name="publisher" />
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="editBtn">确认</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 引入 lib 目录下的 bootstrap 和 axios -->
  <script src="./lib/axios.js"></script>
  <script src="./lib/form-value.js"></script>
  <script src="./lib/bootstrap.min.js"></script>
  <script src="./lib/nprogress(1).js"></script>
  <script>
    //全局配置请求根路径(他会作用于后面的每个请求)
    // 参考网站：https://www.axios-http.cn/docs/config_defaults
    axios.defaults.baseURL = 'http://www.itcbc.com:3006'


    //添加请求拦截器
    axios.interceptors.request.use(
      function (config) {
        //config是一个对象,描述了当前这次请求的配置
        //可以在这个配置的基础之上,再加自己的配置;  可以修改原有的配置
        //在发送请求之前做些什么
        // console.log('请求发送了',config);
        NProgress.start()//N  P 都是大写的
        return config;
      },
      function (error) {
        //对请求错误做些什么
        return Promise.reject(error)
      }
    )

    //添加响应拦截器
    axios.interceptors.response.use(
      function (response) {
        //2xx  范围内的状态码都会触发该函数
        //应对相应数据
        //response表示,和 then(result => {})里面的result是一个意思
        NProgress.done()
        return response
      },
      function (error) {
        //超出2xx 范围的状态码都会触发该函数
        //应对响应错误
        //error 表示的意思,和catch(error => {})里面的 error 是一个意思
        Nprogress.done()
        return Promise.reject(error)
      }
    )

    //1.获取图书并渲染到表格中
    //map  循环遍历 还能返回一个新数组
    // item  数组遍历每个小对象  里元素
    //arr 数组的值由return返回值的值构成[*****]  一个新数组
    //如果返回一个p标签 那么数组也是p标签组成  return''或者反引号``(模板字符串)=>拼接变量
    //怎么得到字符串``拼接,=>.join('需要拼接的符号')  拼接两个数组的元素  
    // function renderBooks() {
    //   axios({
    //     method: 'GET',
    //     url: '/api/getbooks',
    //     params: {
    //       appkey: 'zhizhi0208'//表示只获取这个用户的图书
    //     }
    //   })
    function renderBooks() {
      axios.get('/api/getbooks', {
        params: { appkey: 'zhizhi0208' }
      }).then(({ data: res }) => {
          // console.log(res)
          // console.log(res.data) // [ {id/bookname/author/publisher}, {id/bookname/author/publisher} ]
          let arr = res.data.map(item => {
            return `
          <tr>
          <th scope="row">${item.id}</th>
          <td>${item.bookname}</td>
          <td>${item.author}</td>
          <td>${item.publisher}</td>
          <td>
            <button data-id='${item.id}' type="button" class="btn btn-link btn-sm btn-delete">删除</button>
            <button type="button"  data-publisher='${item.publisher}'data-author='${item.author}'data-id='${item.id}' data-bookname='${item.bookname}' class="btn btn-link btn-sm btn-update">编辑</button>
          </td>
        </tr>
          
          `
          })
          // console.log(arr.join('');
          document.querySelector('tbody').innerHTML = arr.join('')
        }).catch((error) => {
          // console.dir(error) // dir 可以查看对象的内部结构
          alert(error.response.data.message)

        })
    }
    renderBooks()


    //添加图书
    let addModal = new bootstrap.Modal(document.querySelector('#addModal'))
    //点击添加按钮,让模态框显示
    document.querySelector('.btn-success').addEventListener('click', function () {
      addModal.show()//让模态框显示

    })

    //点击添加表单中的确认按钮
    document.querySelector('#addBtn').addEventListener('click', function () {
      //获取输入框的值,提交到接口
      let data = val(document.querySelector('#addForm'))
      data.appkey = 'zhizhi0208'
      //ajax 提交数据,完成添加
      axios.post('/api/addbook'.data)
        .then(({ data: res }) => {
          //res = {status: 0 ,message: '添加图书成功'}
          if (res.status === 0) {
            renderBooks() //调用函数,重新渲染
            document.querySelector('#addForm').reset() //重置表单
            addModal.hide() //让模态框隐藏
          }
        }).catch((error) => {
          alert(error.response.data.message)
        })

      //获取输入框的值  提交到接口
      // let bookname = document.querySelector('#addForm [name = bookname]').value
      // let author = document.querySelector('#addForm [name = author]').value
      // let publisher = document.querySelector('#addForm [name = publisher]').value
      // let data = val(document.querySelector('#addForm'))
      // console.log(bookname,author,publisher);
      //ajax提交数据,完成添加
    //   axios({
    //     method: 'POST',
    //     url: '/api/addbook',
    //     data: {
    //       //键值同名的情况下 可以写一个
    //       bookname,
    //       author: author,
    //       publisher: publisher,
    //       appkey: 'zhizhi0208'
    //     }
    //   }).then(({ data: res }) => {
    //     //res = {status:0,message:'添加图书成功'}
    //     if (res.status === 0) {
    //       renderBooks()//调用函数  重新渲染

    //       document.querySelector('#addForm').reset()//重置表单  方便下一次输入
    //       addModal.hide()//让模态框隐藏
    //       // console.log(res);
    //     }
    //   }).catch((error) => {
    //     alert(error.response.data.message)
    //   })
    })


    //编辑的模态框
    let editModal = new bootstrap.Modal(document.querySelector('#editModal'))
    ///删除修改
    document.querySelector('tbody').addEventListener('click', function (e) {
      if (e.target.classList.contains('btn-delete')) {
        // 点击的时候,获取当前数据的id(自定义属性 -- data-id)
        // console.log(e.target);
        // console.log(e.target.dataset);
        // console.log(e.target.dataset.id);
        let id = e.target.dataset.id
        // console.log('点击的是删除')
        // 获取 e.target 目标元素的 data-id 自定义属性值，值就是 id
        // dataset 属性，专门用于获取标签的 data-xx 属性
        // 比如 <p data-id="1" data-name="zs" data-age="20">xxxx</p>
        // p.dataset = { id: 1, name: 'zs', age: 20 }
        // console.log(e.target.dataset)
        // axios({
        //   method: 'DELETE',
        //   url: '/api/delbook',
        //   params: {
        //     id,
        //     appkey: 'zhizhi0208'
        //   }
        // })
        axios.delete('/api/delbook', {
          params: {
            id: id,
            appkey: 'zhizhi0208'
          }
        })
          .then(({ data: res }) => {
            if (res.status === 0) {
              //表示删除成功
              renderBooks()//调用函数,重新渲染函数
            }
          }).catch((error) => {
            alert(error.response.data.message)
          })
      }

      if (e.target.classList.contains('btn-update')) {
        console.log('点击的是编辑');
        editModal.show()//显示模态框
        let shuju = e.target.dataset //e.target 表示点击的编辑按钮;dataset 可以获取元素所有的data-xxx属性值
        // document.querySelector('#editModal [name=bookname]').value = shuju.bookname
        // document.querySelector('#editModal [name=author]').value = shuju.author
        // document.querySelector('#editModal [name=publishe]').value = shuju.publishe
        // document.querySelector('#editModal [name=id]').value = shuju.id


        // for (let key in shuju) {
        //   document.querySelector(`#editForm [name=${key}]`).value = shuju[key]
        // }

        val(document.querySelector('#editForm'), shuju)

      }
    })


    //点击最后的修改弹层中的确认

    document.querySelector('#editBtn').addEventListener('click', function () {
      let id = document.querySelector('#editForm [name=id]').value
      let bookname = document.querySelector('#editForm [name=bookname]').value
      let author = document.querySelector('#editForm [name=author]').value
      let publisher = document.querySelector('#editForm [name=publisher]').value
      // ajax提交
      //   axios({
      //     method: 'PUT',
      //     url: '/api/updatebook',
      //     data: {
      //       id,
      //       bookname,
      //       author,
      //       publisher,
      //       appkey: 'laotang1234'
      //     }
      //   }).then(({ data: res }) => {
      //     if (res.status === 0) {
      //       // 修改成功
      //       renderBooks() // 调用函数，重新获取数据，重新渲染数据
      //       editModal.hide() // 关闭弹框
      //     }
      //   }).catch((error) => {
      //     // console.dir(error) // dir 可以查看对象的内部结构
      //     alert(error.response.data.message)
      //   })
      // })

      axios.put('/api/updatebook', {
        id,
        bookname,
        author,
        publisher,
        appkey: 'zhizhi0208'
      }).then(({ data: res }) => {
        if (res.status === 0) {
          // 修改成功
          renderBooks() // 调用函数，重新获取数据，重新渲染数据
          editModal.hide() // 关闭弹框
        }
      }).catch((error) => {
        // console.dir(error) // dir 可以查看对象的内部结构
        alert(error.response.data.message)
      })
    })


  </script>
</body>

</html>